<template>
  <div class="main">
    <van-list v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad">
      <van-card v-for="item in film_list"
                :key="item.filmId"
                @click="show_detail(item.filmId)">
        <template #thumb>
          <img :src="item.poster"
               width="66"
               alt="" />
        </template>
        <template #title>
          <div class="title">{{item.name}}</div>
        </template>
        <template #desc>
          <div class="desc">
            <div>
              观众评分：<span class="grade">{{item.grade}}</span>
            </div>
            <div>
              主演：{{item.actors|parseActors}}
            </div>
            <div>{{item.nation}} | {{item.runtime}}分</div>
          </div>
        </template>
        <template #tags>
          <van-tag plain
                   class="buyTicket"
                   size="large"
                   color="#ff5f16"
                   type="danger"
                   style="cursor:pointer">
            购票
          </van-tag>
        </template>
      </van-card>
    </van-list>
  </div>
</template>

<script>
// 导入uri
import uri from "@/config/uri";
export default {
  data () {
    return {
      film_list: [],
      pageNum: 1,
      loading: false,
      finished: false
    }
  },
  methods: {
    onLoad () {
      this.$http.get(uri.getNowList + "?pageNum=" + this.pageNum).then((res) => {
        if (res.status === 0) {
          let maxPage = Math.ceil(res.data.toal / 10)
          this.film_list = [...this.film_list, ...res.data.films]
          if (this.pageNum < maxPage) {
            this.pageNum++
          } else {
            this.finished = true
          }
          this.loading = false
        } else {
          Toast("获取列表数据失败！")
        }
      })
    },
    show_detail (filmID) {
      this.$router.push("/film/" + filmID)
    }
  },
  created () {
    this.$http.get(uri.getSoonList).then((res) => {
      if (res.status === 0) {
        this.film_list = res.data.films;
        console.log(this.film_list)
      } else {
        Toast("获取数据失败")
      }
    })
  },
  filters: {
    parseActors (actors) {
      let str = "";
      if (actors) {
        actors.forEach((el) => {
          str += el.name + " ";
        });
      } else {
        str = "暂无主演";
      }
      return str.length > 17 ? str.substr(0, 17) + "..." : str;
    }

  }

};
</script>

<style scoped>
/* 电影标题样式 */
.title {
  color: #191a1b;
  font-size: 16px;
  line-height: 22px;
}

/* 电影描述样式 */
.desc {
  color: #797d82;
  font-size: 13px;
}

/* 电影评分 */
.grade {
  color: #ffb232;
  font-size: 14px;
}

/* 购票按钮 */
.buyTicket {
  float: right;
  position: relative;
  top: -35px;
}

/* 去除缩略图的圆角 */
.van-card__thumb img {
  border-radius: 0px;
}

/* 重新设置缩略图的宽度 */
.van-card__thumb {
  width: 70px;
}

/* 让底部上去50px */
.main {
  margin-bottom: 50px;
}
</style>
